<template>
	<div class="song-list">
		<div class="nav-head"><router-link to="/layout/musLib"><img src="../../../assets/icon-return45.png"></router-link><div class="title">歌单</div></div>
		<div class="top-blank"></div>
		<div class="song-list-wraper">
			<div class="song-sort">
				<div class="language">
					<div class="title">语种</div>
					<div class="kinds">
						<span>汉语</span>
						<span>英语</span>
						<span>韩语</span>
						<span>日语</span>
						<span>法语</span>
					</div>	
				</div>
				<div class="scenes">
					<div class="title">场景</div>
					<div class="kinds">
						<span>学习</span>
						<span>约会</span>
						<span>跳舞</span>
						<span>工作</span>
						<span>睡前</span>
					</div>		
				</div>
				<div class="mood">
					<div class="title">心情</div>
					<div class="kinds">
						<span>宣泄</span>
						<span>伤感</span>
						<span>安静</span>
						<span>治愈</span>
						<span>思念</span>
					</div>
				</div>
				<div class="look-more">查看更多 <img src="../../../assets/icon-next20.png"></div>
			</div>
			<div class="recommend-wraper">
				<div class="recommend-nav">
					<span><router-link to="/hotRec">热门推荐</router-link></span>
					<span><router-link to="latRec">最新推荐</router-link></span>
				</div>
				<div class="recommend-list">
					<div class="mr10"><img src="../../../assets/recommend-pic1.png"><p>轻音乐300首</p></div>
					<div><img src="../../../assets/recommend-pic1.png"><p>从你离开后，我再也不敢听这首歌</p></div>
					<div class="mr10"><img src="../../../assets/recommend-pic1.png"><p>轻音乐300首</p></div>
					<div><img src="../../../assets/recommend-pic1.png"><p>从你离开后，我再也不敢听这首歌</p></div>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from '../../../components/music_player'
	export default{
		name:"songList",
		data(){
			return{

			}
		},
		components:{
			musicPlayer
		}
	}
</script>
<style scoped lang="less">
.blank{
	width: 100%;
	height: 108 / 100rem;
}
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}	
.song-list-wraper{
	width: 100%;
	background-color: #dbd7df;
	.song-sort{
		width: 100%;
		padding-top: 32/100rem;
		padding-left: 20/100rem;
		box-sizing: border-box;
		background-color: #fff;
		.language{
			margin-bottom: 40/100rem;
			overflow: hidden;
			.title{
				float: left;
				font-size: 30/100rem;
				margin-right: 78/100rem;
			}
			.kinds{
				float: left;
				span{
					width: 118/100rem;
					display: block;
					float: left;
					font-size: 24 / 100rem
				}
			}
		}
		.scenes{
			margin-bottom: 40/100rem;
			overflow: hidden;
			.title{
				float: left;
				font-size: 30/100rem;
				margin-right: 78/100rem;
			}
			.kinds{
				float: left;
				span{
					width: 118/100rem;
					display: block;
					float: left;
					font-size: 24 / 100rem
				}
			}
		}
		.mood{
			margin-bottom: 40/100rem;
			overflow: hidden;
			.title{
				float: left;
				font-size: 30/100rem;
				margin-right: 78/100rem;
			}
			.kinds{
				float: left;
				span{
					width: 118/100rem;
					display: block;
					float: left;
					font-size: 24 / 100rem
				}
			}
		}
		.look-more{
			text-align: center;
			font-size: 20/100rem;
			padding-bottom: 38/100rem;
			img{
				width: 12/100rem;
			}
		}
	}
	.recommend-wraper{
		background-color: #fff;
		margin-top: 20 / 100rem;
		overflow: hidden;
		.recommend-nav{
			display: flex;
			text-align: center;
			font-size: 30 / 100rem;
			padding-top: 32 / 100rem;
			padding-bottom: 16 / 100rem;
			span{
				flex:1;
			}
		}
		.recommend-list{
			width: 100%;
			overflow: hidden;
			div{
				float: left;
				width: 370 / 100rem;
				margin-bottom: 25 / 100rem;
				img{
					width: 100%;
				}
				p{
					font-size: 24 / 100rem;
					padding-top: 5 / 100rem;
					margin-left: 20 / 100rem;
					letter-spacing: 1px;
					line-height: 44 / 100rem;
				}
			}
			.mr10{
				margin-right: 10 / 100rem;
			}
		}
	}
}	
</style>